﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartSamples.aspx.cs" Inherits="JSONData.Chart1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>.NET Visualization Chart Samples</title>

    <script type='text/javascript' src='http://www.google.com/jsapi'></script>

    <script type='text/javascript'>
        google.load('visualization', '1', {'packages':['columnchart','piechart','linechart','intensitymap']});
        google.setOnLoadCallback(drawVisualization);


        function drawVisualization() {

            var query = new google.visualization.Query('http://localhost:1717/SimpleDataSource.aspx');

            // Send the query with a callback function.
            query.send(handleQueryResponse);
        }        

        function handleQueryResponse(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }

            var data = response.getDataTable();
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, { title: 'Sales per Region', titleX: 'Region', titleY: 'Euros' });

            var pie = new google.visualization.PieChart(document.getElementById('piechart_div'))
            pie.draw(data, null);

            var line = new google.visualization.LineChart(document.getElementById('linechart_div'))
            line.draw(data, null);

            var map = new google.visualization.IntensityMap(document.getElementById('intensitymap_div'))
            map.draw(data, {region:'usa'});                    
        }          
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table border="0">
    <tr>
        <td>
                <div id='chart_div' style='width: 300px; height: 200px;'>
                </div>
        </td>
        <td>
                <div id='piechart_div' style='width: 300px; height: 200px;'>
                </div>
        </td>
    </tr>
    <tr>
        <td>
                <div id='intensitymap_div' style='width: 300px; height: 200px;'>
                </div>
        </td>
        <td>
                <div id='linechart_div' style='width: 300px; height: 200px;'>
                </div>
        </td>
    </tr>

    </table>

    </form>
</body>
</html>
